<template>
  <div ref="el">
    <slot :data="hl.dataForSlot">
      <span>{{ hl.dataForSlot.words }}</span>
    </slot>
  </div>
</template>

<script setup>
const el = ref(null);

const hl = defineProps({
  words: {
    type: String,
    default: "",
  },
  dataForSlot: {
    required: true,
    type: Object,
    default: () => {},
  },
});

const emit = defineEmits(["update-height"]);

onMounted(() => {
  // console.log(hl.dataForSlot);
  emit("update-height", {
    id: hl.dataForSlot.id,
    height: el.value.clientHeight,
  });
});
</script>

<style lang="scss" scoped></style>
